import React, { PureComponent } from "react";
import ButtonComp from "../ButtonComp";
import { TreeComp } from "../TreeComp";
import InputComp from "../InputComp";
import ModalComp from "../ModalItem/ModalComp";
import {forEach, isEmpty, isFunction} from "lodash-es";
import {getRandomKey} from "jh-utils";
import { FolderOpenOutlined } from "@ant-design/icons";
import {Space, Form, Button} from "antd";
import BaseComp from "../Base/BaseComp";

/**
 * 选择/新建文件夹
 * @Author: Admin
 * @Date: 2021/1/31 17:48
 */

export default class FolderModal extends BaseComp {
    formRef;
    fetchTree(params){
        let { fetchTree } = this.props;
        if(isFunction(fetchTree)){
            return  fetchTree(params)
        }
        let {search, node } = params;
        let pid = node && node.id || 0;

        return this.reqGet(`/api/bi/team_doc_manager/query_doc_manager?pid=${pid}&showDoc=false`).then(rsp => {
            let rspData = null;
            if(rsp && rsp.status === 200 && !isEmpty(rsp.data)){
                let docManager = rsp.data.docManager || [];
                if(!isEmpty(docManager)){
                    rspData = [];
                    forEach(docManager, item =>{
                        rspData.push({
                            ...item,
                            key: item.id || getRandomKey(),
                            title: item.name,
                            icon: <FolderOpenOutlined/>
                        })
                    })
                }
            }

            return rspData;
        })

    }

    hdlCancel(){
        let { hdlCancel } = this.props;
        hdlCancel && hdlCancel();
    }

    hdlOk(){
        // console.log('values:');
        let { node  = {}} = this.state;
        if(this.formRef && this.formRef.validateFields){
            this.formRef.validateFields().then(values => {
                if(values.name){
                    // 新建 目录
                    this.jsonPost(`/api/bi/team_doc_manager/create_manager?pid=${node.id || 0}&name=${values.name}`).then(res => {
                        if(res && res.status === 200 && res.data){
                            this.hdlCancel();
                            this.changeOk({
                                name: values.name,
                                ...(res.data || {})
                            })
                        }
                    })
                }else {
                    this.hdlCancel();
                    this.changeOk(node)
                }
            })
        }
    }

    changeOk(node){
        let { hdlOk } = this.props;

        hdlOk && hdlOk(node)
    }


    mainRender(){
        let { visible } = this.props;
        return <div>
            <ModalComp
                title={'选择/新建文件夹'}
                visible={visible}
                wrapClassName={'insertQx'}
                mask={true}
                destoryOnclose={true}
                onCancel={this.hdlCancel.bind(this)}
                footer={(
                    <Form
                        component={'div'}
                        ref={(ref)=>{this.formRef = ref}}
                    >
                        <Space style={{paddingTop: 8}}>
                            <InputComp
                                fieldName={'name'}
                                compLabel={this.formatMsgByCn('新建目录')}
                            />
                            <Form.Item>
                                <ButtonComp onClick={this.hdlCancel.bind(this)}>
                                    {this.formatMsgByCn('取消')}
                                </ButtonComp>
                            </Form.Item>
                            <Form.Item>
                                <ButtonComp
                                    type={'primary'}
                                    htmlType="submit"
                                    onClick={this.hdlOk.bind(this)}
                                >
                                    {this.formatMsgByCn('确定')}
                                </ButtonComp>
                            </Form.Item>
                        </Space>
                    </Form>
                )}
            >
                <TreeComp
                    style={{height: 300}}
                    fetchTree={this.fetchTree.bind(this)}
                    isSearch={false}
                    isUnChecked={true}
                    showIcon={true}
                    onSelect={(values, e = {}) => {
                        // console.log('选中回调', values, e);
                        let node = e && e.node;
                        if(isEmpty(values)){
                            node = {};
                        }
                        this.setState({node})
                    }}
                />

            </ModalComp>
        </div>
    }
}
